<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="基础信息" name="Datas">
                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm page-form">

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知单编号" prop="Number">
                                <el-input v-model="model.Number" placeholder="请输入到货通知单编号" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="币种" prop="Currency" >
                                <el-select v-model="model.Currency" >
                                    <el-option label="人民币" value="人民币"></el-option>
                                    <el-option label="美金" value="美金"></el-option>
                                    <el-option label="欧元" value="欧元"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="收货地址" prop="Address">
                                <el-input v-model="model.Address" placeholder="请输入收货地址" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="供应商名称" prop="VendorId">
                                <el-select :value="model.VendorName" placeholder="请选择供应商名称" @change="VendorChange" :disabled="true"   >
                                    <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName"
                                        :value="Vendor"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系人" prop="VendorContact">
                                <el-input v-model="model.VendorContact" placeholder="请输入联系人" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系人电话" prop="VendorContactTel">
                                <el-input v-model="model.VendorContactTel" placeholder="请输入联系人电话" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>

                        
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="入库仓" prop="WarehouseId">
                                <el-select :value="model.WarehouseName" placeholder="请选择入库仓" @change="WarehouseChange" :disabled="true" >
                                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id"
                                        :label="Warehouse.WarehouseName" :value="Warehouse"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="交货日期" prop="DeliveryDate">
                                <el-date-picker v-model="model.DeliveryDate" type="datetime" :disabled="true"   
                                    placeholder="选择交货日期" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="不含税总价" prop="Total">
                                <el-input v-model="model.Total" placeholder="请输入不含税总价" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        
                        
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="含税总价" prop="TaxTotal">
                                <el-input v-model="model.TaxTotal" placeholder="请输入含税总价" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="到货时间" prop="ReceiveDate">
                                <el-date-picker v-model="model.ReceiveDate" type="datetime"   placeholder="选择到货时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" >
                            <el-form-item label="到货单状态" prop="Status" >
                                <el-select v-model="model.Status" :disabled="true"   >
                                    <el-option label="待审核" value="0"></el-option>
                                    <el-option label="已审核" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                       
                     
                        
                    </el-row>


                </el-form>

            </el-tab-pane>
            <el-tab-pane label="添加商品" name="AddProduct">

                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="300" show-summary
                    :summary-method="getSummaries">
                    <el-table-column type="selection" width="70"></el-table-column>
                    <el-table-column prop="ItemCode" label="产品ID" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Count" label="采购数量" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Quantity" label="到货数量" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Quantity"   @change="handleBlur(scope.row)"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Price" label="采购价" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Tax" label="税率" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="TaxAmount" label="含税总价" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Amount" label="不含税总价" :show-overflow-tooltip="true"></el-table-column>

                   
                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">移除</el-button>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <div class="page-form-action">
            
            <el-button @click="checkedOrderPo">选择采购单</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>

        </div>

        <!-- 弹窗 -->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="60%">
            <SelectedOrderPo @callback="SelectedOrderPoCallBack" v-if="dialogDomain.dialogVisible " />
        </el-dialog>
    </div>
</template>
  
  <script>
  import SelectedOrderPo from './SelectedOrderPo.vue'
  export default {
      components:{
        SelectedOrderPo
      },
      props:{
         model: {
              require: true,
              type: Object
          },
          isUpdate: {
              require: true,
              type: Boolean
          },
          WarehouseList:{
              type: Array,
              required: true
          },
          VendorList:{
              type: Array,
              required: true
          },
      },
  data(){
      return{
          activeName: 'Datas',
          pageDomain:{
              PageIndex:1,
              PageSize:10,
              TotalCount:0,
          },
          tableData:[],
          isLoading:false,
          //对话框对象
              dialogDomain:{
                  title:'添加产品',
                  dialogVisible:false
              },
          rules:{
              Number: { required: true, message: '请输入到货单编号', trigger: 'blur' },
              Currency: { required: true, message: '请选择币种', trigger: 'blur' },
              Address: { required: true, message: '请输入收货地址', trigger: 'blur' },
              ReceiveDate: { required: true, message: '请选择到货时间', trigger: 'blur' },
          }
      }
  },
  created(){
      if (this.isUpdate)
              this.GetWareHouseInboundBillIdAsync();
  },
     methods:{
           getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              columns.forEach((column, index) => {
                  if (index === 0) {
                      sums[index] = '总价';
                      return;
                  }
                  if (column.property === 'Amount' ||column.property === 'TaxPrice' ||column.property === 'TaxAmount' || column.property === 'Price') {
                      const values = data.map(item => Number(item[column.property]));
                      
  
                      if (!values.every(value => isNaN(value))) {
                          sums[index] = values.reduce((prev, curr) => {
                              const value = Number(curr);
                              if (!isNaN(value)) {
                                  return prev + curr;
                                  
                              } else {
                                  return prev;
                              }
                          }, 0);
                          sums[index] += ' 元';
                      } else {
                          sums[index] = '';
                      }
                  }
                  else {
                      sums[index] = '';
                  }
                  
              });
              return sums;
         },
        
         VendorChange(model) {
             this.model.VendorId=model.Id;
              this.model.VendorName=model.VendorName;
              console.log(model);
          },
          WarehouseChange(model){
              this.model.WarehouseId = model.Id;
              this.model.WarehouseName=model.WarehouseName;
              console.log(model)
          },
          checkedOrderPo() {
             this.dialogDomain.title = "选择采购单";
             this.dialogDomain.dialogVisible = true;
             this.dialogDomain.dialogType = 1;
         },
          
          SelectedOrderPoCallBack(model,list){
            if(model.State==2){
                this.showNotify('已全部到货的单据不能重新选择');
                return;
            }
            this.dialogDomain.dialogVisible = false;

            console.log(model,list);
            this.model.OrderPoId = model.Id;
            this.model.Currency=model.Currency;
            this.model.VendorId = model.VendorId;
            this.model.VendorName = model.VendorName;
            this.model.VendorContact = model.VendorContact;
            this.model.VendorContactTel = model.VendorContactTel;
            this.model.WarehouseId = model.WarehouseId;
            this.model.WarehouseName = model.WarehouseName;
            this.model.DeliveryDate = model.DeliveryDate;
            this.model.Total = model.Total;
            this.model.TaxTotal = model.TaxTotal;
            
            

            this.$http.get('/api/WareHouseInboundBill/GetOrderPoByItem',{
                  params:{
                    OrderPoId:model.Id,
                  }
              })
              .then(res=>{
                  this.tableData = res.Data;
                  
              })

         },
         handleBlur(row) {
             if (row.Quantity > row.Count) {
                 this.showNotify('到货数量不能超过采购数量');
                 row.Quantity = row.Count

             }


             if (row.Quantity === 0) {
                 this.showNotify('请输入到货数量');
             }
         },



         //移除商品
         del(model) {
             let index = this.tableData.indexOf(model);
            this.tableData.splice(index, 1);
        },
        
        
          submitForm(){
              this.$refs['ruleForm'].validate((valid) => {
                  if (valid) {
  

                    try{
                        
                        this.tableData.forEach(x=>{
                            if(x.Quantity<=0){
                                throw x.ItemName+'到货数量不能小于1'
                            }
                        })

                        if (this.isUpdate) {
                            this.put();
                        }
                        else {
                            this.add();
                        }
                    }catch(e){
                        this.showNotify(e);
                    }


                      
  
                  } else {
                      this.showNotify('请输入必填项');
                      return false;
                  }
              });
              
         },
          
          resetForm(){
              this.$refs['ruleForm'].resetFields();
          },
          add(){
              this.$http.postForm('/api/WareHouseInboundBill',{model:this.model,WareHouseInboundBillItemString:JSON.stringify(this.tableData)},{loading:this.$loading()})
              .then(res=>{
                  this.$emit('callback');
                  console.log(res);
              })
          },
          put() {
              this.$http.putForm('/api/WareHouseInboundBill', { model: this.model,WareHouseInboundBillItemString:JSON.stringify(this.tableData)}, { loading: this.$loading() })
                  .then((res) => {
                      this.$emit('callback');
                  console.log(res); 
                  })
          },
          GetWareHouseInboundBillIdAsync(){
              this.isLoading=true;
              this.$http.get('/api/WareHouseInboundBill/GetWareHouseInboundBillIdAsync',{
                  params:{
                    WareHouseInboundBillId:this.model.Id,
                      WarehouseId: this.model.WarehouseId
                  }
              })
              .then(res=>{
                  console.log(res)
                  this.isLoading=false;
                  this.tableData=res.Data;
              })
          },
        
          
         
     }
  }
  </script>
<style>

</style>